<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>教练</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/okadmin.css">

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend style="margin-left: 10%">我的教练</legend>
</fieldset>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15" style="width: 60%;margin: 0 auto">
                <ul class="layui-timeline" id="choices">
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<div id="evaluateCoach" style="display: none">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row layui-col-space15" style="width: 80%;margin: 0 auto">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    </fieldset>
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div>
                                <img width="380" style="float:right;margin-right: 20%" height="270" id="photo"
                                     src="">
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <fieldset class="layui-elem-field">
                                        <legend>姓名</legend>
                                        <div class="layui-field-box" id="fullname">

                                        </div>
                                    </fieldset>
                                </div>
                                <div class="layui-col-xs6">
                                    <fieldset class="layui-elem-field">
                                        <legend>性别</legend>
                                        <div class="layui-field-box" id="agender">

                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <fieldset class="layui-elem-field">
                                        <legend>电话</legend>
                                        <div class="layui-field-box" id="phone">

                                        </div>
                                    </fieldset>
                                </div>
                                <div class="layui-col-xs6">
                                    <fieldset class="layui-elem-field">
                                        <legend>邮箱</legend>
                                        <div class="layui-field-box" id="email">
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                            <div class="layui-btn layui-btn-normal"
                                 style="float:right;margin-right: 40%;margin-top: 20px"
                                 id="evaluateBtn">评价
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="evaluateBody" style="display: none">
    <div class="layui-form">
        <div class="layui-form-item" style="margin-top: 3%">
            <fieldset class="layui-elem-field">
                <legend>评价</legend>
                <div class="layui-col-xs6">
                <textarea id="evaluateContent" type="text/plain" placeholder="此处填写评价"
                          style="width:100%;height:250px;margin-left: 20px;resize:none;"></textarea>
                </div>
                <div class="layui-col-xs6">
                    <div style="margin-left: 80px;margin-top: 20%;">
                        <div id="studentRate" style="margin-left: 50px"></div>
                        <br>
                        <div class="layui-btn layui-btn-normal" style="margin-left: 23%;"
                             id="pushEvaluate">提交评价
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<div id="showEvaluate" style="display: none">
    <div class="layui-form">
        <div class="layui-form-item" style="margin-top: 3%">
            <fieldset class="layui-elem-field">
                <legend>评价</legend>
                <div class="layui-col-xs6">
                <textarea id="showEvaluateContent" type="text/plain"  readonly="readonly"
                          style="width:100%;height:250px;margin-left: 20px;resize:none;"></textarea>
                </div>
                <div class="layui-col-xs6">
                    <div style="margin-left: 80px;margin-top: 20%;">
                        <div id="showStudentRate" style="margin-left: 50px"></div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script>
    var overallCoachId = "";
    var overallChoiceId = "";
    var choiceData;//选择数据
    var showCoach;//显示教练
    var addEvaluate;//添加评价
    var showEvaluate;//显示评论
    var overallRateVal = 5;
    layui.use(['table', 'layer', 'rate'], function () {
        var table = layui.table,
            $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            rate = layui.rate
        var rateVal = -1;
        rate.render({
            elem: '#studentRate'
            , value: overallRateVal
            , half: true
            , text: true
            , setText: function (value) { //自定义文本的回调
                this.span.text(value * 2);
            }
            , choose: function (value) {
                rateVal = value;
            }
        })

        var setRate = function () {
            //多个评分
            layui.each($('.lf_rate'), function (index, elem) {

                var configTemp = $(elem).attr('lay-data');
                try {
                    configTemp = eval('(' + configTemp + ')');

                } catch (e) {
                    configTemp = {};

                }

                rate.render($.extend(true, {
                    elem: elem
                }, configTemp));

            });
        }

        function getChoicesHtml(d) {
            var agender = d['agender'] == false ? "女" : "男"
            var stage = "";
            if (d['stage'] == 1) {
                stage = "科目一"
            } else if (d['stage'] == 2) {
                stage = "科目二"
            } else if (d['stage'] == 3) {
                stage = "科目三"
            } else if (d['stage'] == 4) {
                stage = "科目四"
            }
            var photo = isNoEmpty(d['photo']) ? MainIP + mainUri + d['photo'] : '../../images/userImgError.png'
            var html = '<li class="showNotice" style="margin-bottom: 20px;cursor:pointer;" onclick="showCoach(\'' + d['choiceId'] + '\',\'' + d['coachId'] + '\')" >' +
                '<img width="76" height="54" src="' + photo + '" style="float: left">' +
                '<div class="layui-timeline-content layui-text" >' +
                '<h3 class="layui-timeline-title" style="overflow: hidden;-webkit-line-clamp:2;white-space: nowrap;text-overflow: ellipsis;margin-left:100px;height: 54px">' +
                '<span>姓名:' + d['fullname'] + '</span><span style="margin-left: 5px">性别:' + agender + '</span><br><span>科目:科目三</span>'
            var stageEnd = '<span style="cursor: default" class="layui-btn layui-btn-xs layui-btn-normal">教学完毕</span>';
            var evaluate = '<span style="float: right;margin-right: 5%;margin-top: -10px"class="layui-btn layui-btn-normal" onclick="addEvaluate(\'' + d['choiceId'] + '\',\'' + d['coachId'] + '\')">评价</span></h3></div></li><hr>'
            var evaluateEnd = '<span style="float: right;margin-right: 5%;margin-top: -10px" class="layui-btn" onclick="showEvaluate(\'' + d['choiceId'] + '\',\'' + d['coachId'] + '\')">查看评价</span></h3></div></li><hr>'
            var stageNotEnd = '<span style="cursor: default" class="layui-btn layui-btn-xs layui-btn-warm">教学中</span></h3></div></li><hr>';
            var retHtml = "";
            if (d['stageEnd'] == true) {
                retHtml = html + stageEnd;
                if (isEmpty(d['evaluateId'])) {
                    retHtml += evaluate
                } else {
                    retHtml += evaluateEnd
                }
            } else {
                retHtml = html + stageNotEnd;
            }
            return retHtml;
        }

        //加载已选教练的信息
        var data = {studentId: user['studentId'], page: -1}
        myAjax(mainUri + "/vEvaluate/selects", data, function (d) {
            if (d['code'] == 0) {
                choiceData = d['data']
                $("#choices").html("")
                for (da of d['data']) {
                    $("#choices").append(getChoicesHtml(da));
                }
            }
        })

        //修改教练展示窗口信息
        function setCoachHtml() {
            var data;
            if (isEmpty(overallChoiceId)) {
                return
            }
            for (da of choiceData) {
                if (da['choiceId'] == overallChoiceId) {
                    data = da;
                    break
                }
            }
            dataSetHtml("photo", data, function (val) {
                var photo = isNoEmpty(val) ? MainIP + mainUri + val : '../../images/userImgError.png'
                $("#photo").attr("src", photo)
            })
            dataSetHtml("fullname", data)
            dataSetHtml("agender", data, function (val) {
                $("#agender").html(val == false ? "女" : "男")

            })
            dataSetHtml("phone", data)
            dataSetHtml("email", data)
            if (data['stageEnd'] == true) {
                if (isNoEmpty(data['evaluateId'])) {
                    $("#evaluateBtn").hide();
                } else
                    $("#evaluateBtn").show();
            } else {
                $("#evaluateBtn").hide();
            }

        }

        //显示教练信息
        if (isEmpty(showCoach)) {
            showCoach = function (choiceId, coachId) {
                overallCoachId = coachId;
                overallChoiceId = choiceId;
                setCoachHtml();
                var width = document.body.clientWidth / 2
                width = width > 960 ? width : 960
                layer.open({
                    type: 1,
                    title: '教练',
                    content: $('#evaluateCoach'),
                    area: [width.toString() + 'px', '500px'],
                    shadeClose: true,
                    maxmin: true
                })
                event.stopPropagation()
            }
        }
        //添加评论
        if (isEmpty(addEvaluate)) {
            addEvaluate = function (choiceId, coachId) {
                overallCoachId = coachId;
                overallChoiceId = choiceId;
                var data;
                for (da of choiceData) {
                    if (da['choiceId'] == overallChoiceId) {
                        data = da;
                        break
                    }
                }
                setRate()
                var width = document.body.clientWidth / 2
                width = width > 960 ? width : 960
                layer.open({
                    type: 1,
                    title: '为教练' + data['fullname'] + '添加评价',
                    content: $('#evaluateBody'),
                    area: [width.toString() + 'px', '500px'],
                    shadeClose: true,
                    maxmin: true
                })
                event.stopPropagation()
            }
        }
        //显示评论
        if (isEmpty(showEvaluate)) {
            showEvaluate = function (choiceId, coachId) {
                overallCoachId = coachId;
                overallChoiceId = choiceId;
                var data;
                for (da of choiceData) {
                    if (da['choiceId'] == overallChoiceId) {
                        data = da;
                        break
                    }
                }
                rate.render({
                    elem: '#showStudentRate'
                    ,value: data['score']
                    ,text:true
                    ,readonly: true
                    , setText: function (value) { //自定义文本的回调
                        this.span.text(value);
                    }
                })
                dataSetHtml("evaluateContent",data,function(d){
                    $("#showEvaluateContent").val(d)
                })
                var width = document.body.clientWidth / 2
                width = width > 960 ? width : 960
                layer.open({
                    type: 1,
                    title: '对教练' + data['fullname'] + '的评价',
                    content: $('#showEvaluate'),
                    area: [width.toString() + 'px', '500px'],
                    shadeClose: true,
                    maxmin: true
                })
                event.stopPropagation()
            }
        }

        function pushEvaluate() {
            var data;
            if (isEmpty(overallChoiceId) || isEmpty(overallCoachId)) {
                layer.msg("数据异常,请刷新重试")
                return
            }
            for (da of choiceData) {
                if (da['choiceId'] == overallChoiceId) {
                    data = da;
                    break
                }
            }
            var evaluateContent = $("#evaluateContent").val()
            if (isEmpty(evaluateContent)) {
                layer.msg("评论还未填写")
                return
            }
            layer.confirm("确定发表此评论?", function (index) {
                //学习结束并且还未评论过
                if (data['stageEnd'] == true && isEmpty(data['evaluateId'])) {
                    showloading(true)
                    data = {
                        score: rateVal == -1 ? overallRateVal * 2 : rateVal * 2,
                        evaluateContent: evaluateContent,
                        coachId: overallCoachId,
                        choiceId: overallChoiceId
                    }
                    myAjax(mainUri + "/evaluate/insert", data, function (d) {
                        if (d['code'] == 0) {
                            layer.msg(d['msg'], {
                                icon: 1, time: 1500, end: function () {
                                    location.reload();
                                }
                            })
                        } else {
                            layer.msg(d['msg'])
                        }
                    })
                    showloading(false)
                } else {
                    layer.msg("您已经评论过了")
                    return
                }
            })
        }


        clickFunc("#pushEvaluate", pushEvaluate)
        clickFunc("#evaluateBtn", function () {
            var data;
            for (da of choiceData) {
                if (da['choiceId'] == overallChoiceId) {
                    data = da;
                    break
                }
            }
            var width = document.body.clientWidth / 2
            width = width > 960 ? width : 960
            layer.open({
                type: 1,
                title: '为教练' + data['fullname'] + '添加评价',
                content: $('#evaluateBody'),
                area: [width.toString() + 'px', '500px'],
                shadeClose: true,
                maxmin: true
            })
        })

    });
</script>
</html>
`